<template>
  <div>
    <h2>插槽第一题</h2>
    <div>
      <span
        v-for="(item, index) in arr"
        :key="index"
        @click="qie = item.name"
        :class="{ active: qie === item.name }"
        >\{{ item.title }}\</span
      >
    </div>

    <slot :name="qie"></slot>
  </div>
</template>

<script>
export default {
  name: "CaoVue",
  data() {
    return {
      arr: [
        {
          title: "娱乐新闻",
          name: "yule",
        },
        {
          title: "军事新闻",
          name: "junshi",
        },
        {
          title: "政治新闻",
          name: "zhengzhi",
        },
      ],
      qie: "yule",
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang='less' scoped>
</style>